<template>
  <div class="table-box">
    <ProTable
      ref="proTableRef"
      title="打印模板"
      :indent="20"
      :columns="columns"
      :search-columns="searchColumns"
      :request-api="getTableList"
      row-key="id"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <el-button type="primary" v-auth="'teacher.statistics.create'" :icon="CirclePlus" @click="openAddEdit('新增模板')">
          新增
        </el-button>
        <el-button
          v-auth="'teacher.statistics.remove'"
          type="danger"
          :icon="Delete"
          plain
          :disabled="!scope.isSelected"
          @click="batchDelete(scope.selectedListIds)"
        >
          批量删除
        </el-button>
      </template>
      <template #operation="{ row }">
        <el-button v-auth="'teacher.statistics.update'" :icon="PieChart" type="primary" link @click="printDesigner(row)">
          设计模板
        </el-button>
        <el-button
          v-auth="'teacher.statistics.update'"
          type="primary"
          link
          :icon="EditPen"
          @click="openAddEdit('编辑模板', row, false)"
        >
          编辑
        </el-button>
        <el-button v-auth="'teacher.statistics.remove'" type="primary" link :icon="Delete" @click="deleteInfo(row)">
          删除
        </el-button>
      </template>
    </ProTable>
    <PrintForm ref="printFormRef" />
  </div>
</template>
<script setup name="PrintTemplate">
import { h, ref } from 'vue';
import { CirclePlus, Delete, EditPen, PieChart } from '@element-plus/icons-vue';
import ProTable from '@/components/ProTable/index.vue';
import { useHandleData } from '@/hooks/useHandleData';
import { getPrintList, createPrint, updatePrint, deletePrint } from '@/api/modules/toolbox/print';
import PrintForm from './components/PrintForm.vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const proTableRef = ref();
// 表格配置项
const columns = [
  { type: 'selection', width: 80 },
  { prop: 'id', label: '模板ID' },
  { prop: 'title', label: '模板名称' },
  { prop: 'create_at', label: '创建时间' },
  { prop: 'updata_at', label: '更新时间' },
  { prop: 'create_username', label: '创建人' },
  { prop: 'updata_username', label: '更新人' },
  { prop: 'operation', label: '操作', width: 250, fixed: 'right' }
];
// 搜索条件项
const searchColumns = [{ prop: 'title', label: '模板名称', el: 'input' }];
// 获取table列表
const getTableList = params => {
  return getPrintList(params);
};
// 打开 drawer(新增、查看、编辑)
const printFormRef = ref();
const openAddEdit = async (title, row = {}, isAdd = true) => {
  const params = {
    title,
    row: { ...row },
    api: isAdd ? createPrint : updatePrint,
    getTableList: proTableRef.value?.getTableList
  };
  printFormRef.value?.acceptParams(params);
};
// 删除信息
const deleteInfo = async params => {
  await useHandleData(deletePrint, { ids: [params.id] }, `删除【${params.id}】模板`);
  proTableRef.value?.getTableList();
};
// 批量删除信息
const batchDelete = async ids => {
  await useHandleData(deletePrint, { ids }, '删除所选模板');
  proTableRef.value?.clearSelection();
  proTableRef.value?.getTableList();
};

//设计器
const printDesigner = row => {
  router.push(`/toolbox/print/printdesigner?id=${row.id}`);
};
</script>
